<div class="panel-body">

    <img id="waiting" src="../Media/waiting.gif" ng-show="variablegif.modo == 'wait'" style="position:absolute;z-index:100;top:30%;right:50%;" />

    <form class="form-horizontal">
        <fieldset>
            <legend>Lista EndPoints</legend>
        </fieldset>

        <a href="#/nuevoEndPoint"><input type="button" style="float:right;margin-right:3%" class="btn btn-success" value="Nuevo EndPoint" /></a>
    </form>

    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <td><a href="" ng-click="sortField = 'ID'; reverse = !reverse">ID</a></td>
                <td><a href="" ng-click="sortField = 'Nombre'; reverse = !reverse">Nombre</a></td>
                <td><a href="" ng-click="sortField = 'Tipo.Nombre'; reverse = !reverse">Tipo</a></td>
                <td><a href="" ng-click="sortField = 'Ruta'; reverse = !reverse">Ruta</a></td>
                <td></td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="endpoint in endpoints | filter:query | orderBy:sortField:reverse">
                <th scope="row">{{endpoint.ID}}</th>
                <td>{{endpoint.Nombre}}</td>
                <td>{{endpoint.Tipo.Nombre}}</td>
                <td>{{endpoint.Ruta}}</td>
                <td><a href="#/detalle/{{endpoint.ID}}">Detalles</a></td>
            </tr>
        </tbody>
    </table>
</div>